
import 'dart:math' as math;
import 'package:flutter/material.dart';

const double _iconSize = 16;
const double _DIRECTION_SPACE = 16;
const Size _SETTINGS_BTN_SIZE = const Size(24, 24);
const Size _DIRECTION_BTN_SIZE = const Size(48, 48);
const Size _MAIN_BTN_SIZE = const Size(96, 96);

class GameSettingsButtonGroup extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        _GameButtonWithTxt(
          text: "ON/OFF",
          child: _GameButton(size: _SETTINGS_BTN_SIZE, onTap: (){}),
        ),
        _GameButtonWithTxt(
          text: "SOUNDS",
          child: _GameButton(size: _SETTINGS_BTN_SIZE, onTap: (){}),
        ),
        _GameButtonWithTxt(
          text: "S/P",
          child: _GameButton(size: _SETTINGS_BTN_SIZE, onTap: (){}),
        ),
        _GameButtonWithTxt(
          text: "RESET",
          child: _GameButton(size: _SETTINGS_BTN_SIZE, onTap: (){}),
        ),
      ],
    );
  }
}

class GameDirectionButtonGroup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        SizedBox.fromSize(size: _DIRECTION_BTN_SIZE * 2.8),
        Transform.rotate(
          angle: math.pi / 4,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Transform.scale(
                    scale: 1.5,
                    child: Transform.rotate(
                      angle: -math.pi / 4,
                      child: Icon(Icons.arrow_drop_up, size: _iconSize)
                    )
                  ),
                  Transform.scale(
                    scale: 1.5,
                    child: Transform.rotate(
                      angle: -math.pi / 4,
                      child: Icon(Icons.arrow_right, size: _iconSize)
                    )
                  )
                ],
              ),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Transform.scale(
                    scale: 1.5,
                    child: Transform.rotate(
                      angle: -math.pi / 4,
                      child: Icon(Icons.arrow_left, size: _iconSize)
                    )
                  ),
                  Transform.scale(
                    scale: 1.5,
                    child: Transform.rotate(
                      angle: -math.pi / 4,
                      child: Icon(Icons.arrow_drop_down, size: _iconSize)
                    )
                  ),
                ],
              ),
            ],
          ),
        ),

        Transform.rotate(
          angle: math.pi / 4,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              SizedBox(height: _DIRECTION_SPACE),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  _GameButton(
                    size: _DIRECTION_BTN_SIZE,
                    onTap: (){},
                  ),

                  SizedBox(width: _DIRECTION_SPACE),
                  _GameButton(
                    size: _DIRECTION_BTN_SIZE,
                    onTap: (){},
                  )
                ],
              ),
              SizedBox(height: _DIRECTION_SPACE),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  _GameButton(
                    size: _DIRECTION_BTN_SIZE,
                    onTap: (){},
                  ),
                  SizedBox(width: _DIRECTION_SPACE),
                  _GameButton(
                    size: _DIRECTION_BTN_SIZE,
                    onTap: (){},
                  )
                ],
              ),
              SizedBox(height: _DIRECTION_SPACE)
            ],
          ),)
      ],
    );
  }
}

class GameMainButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return _GameButton(
      size: _MAIN_BTN_SIZE,
      onTap: (){},
    );
  }
}

class _GameButtonWithTxt extends StatelessWidget {
  final String text;
  final Widget child;

  const _GameButtonWithTxt({
    Key key,
    this.text,
    this.child}):super(key:key);


  @override
  Widget build(BuildContext context) {
    return DefaultTextStyle(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[ child, SizedBox(width: 70), Text(text) ],
      ),
      style: TextStyle(fontSize: 12, color: Colors.black),
    );
  }
}

class _GameButton extends StatefulWidget {
  final Size size;
  final Color color;
  final VoidCallback onTap;

  const _GameButton(
      {Key key,
        @required this.size,
        @required this.onTap,
        this.color = Colors.green}):super(key:key);

  @override
  State<StatefulWidget> createState() => new _GameButtonState();

}

class _GameButtonState extends State<_GameButton> {

  Color _color;

  @override
  void didUpdateWidget(_GameButton oldWidget) {
    super.didUpdateWidget(oldWidget);
    _color = widget.color;
  }

  @override
  void initState() {
    super.initState();
    _color = widget.color;
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: _color,
      elevation: 2,
      shape: CircleBorder(),
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTapDown: (_) {
          setState(() {
            _color = widget.color.withOpacity(0.5);
          });
          widget.onTap();
        },

        onTapCancel: (){
          setState(() {
            _color = widget.color;
          });
        },

        onTapUp: (_){
          setState(() {
            _color = widget.color;
          });
        },

        child: SizedBox.fromSize(
          size: widget.size,
        ),
      ),
    );
  }
}